﻿@model VasilekCerozhka.Models.ViewModels.Product.CreateProductVM

<br />

<form asp-action="ProductCreate" class="container form-glass">
    <br />
    <div class="container p-3">
        <h1 class="text-primary">Создать продукт</h1>

        <hr />
        <div class="row mx-auto">

            <div class="col-3">
                
                <div id="carouselExampleDark" class="carousel carousel-blue slide carousel-fade mt-5" data-bs-ride="carousel">

                    <div id="new_products" class="carousel-inner pt-5">
                    </div>

                </div>

            </div>

            <div class="col-6 px-5  mt-3">

                <div asp-validation-summary="ModelOnly" class="text-danger"></div>

                <div class="form_input_custom">
                    <input asp-for="CreateProduct.ProductName" required autocomplete="on" />

                    <label asp-for="CreateProduct.ProductName" for="name" class="label_name_input">
                        <span class="content_name_input">Наименование</span>
                    </label>
                    <span asp-validation-for="CreateProduct.ProductName" class="text-danger"></span>
                </div>

                <div id="select_custom" class="form_input_custom sel sel--black-panther" style="overflow: hidden" onclick="editSelect()">

                    <input id="deleteInput" required />

                    <select asp-for="paramsCategory" asp-items="@Model.SelectCategorys" id="select-category" class="label_name_select" hidden>
                        <option id="cuctom_opt" disabled hidden>&nbsp</option>
                    </select>

                    <label id="lebel_custom" for="name" class="label_name_input">
                        <span id="span_custom" class="content_name_input">Категории</span>
                    </label>
                </div>

                <div class="col-12 pt-4">

                    <label id="id_label_textareaSD" class="label_textarea">Краткое описание</label>

                    <div id="borderIdSD" style="width: 100%;">
                        <textarea asp-for="CreateProduct.ShortDescription" id="id_textareaSD" class="textarea_custom" 
                            onblur="TextareaEmpty('id_label_textareaSD','id_textareaSD','borderIdSD','id_span_labelSD')" 
                            onclick="TextareaChangesStyle('id_label_textareaSD','id_textareaSD','borderIdSD','id_span_labelSD')"></textarea>
                    </div>
                    <span id="id_span_labelSD" class="span_label_textarea"></span>

                    <span asp-validation-for="CreateProduct.ShortDescription" class="text-danger"></span>
                </div>

                 <div  class="col-12 pt-4">

                    <label id="id_label_textarea" class="label_textarea">Подробное описание</label>

                    <div id="borderId" style="width: 100%;">
                        <textarea asp-for="CreateProduct.Description" id="id_textarea" class="textarea_custom" 
                            onblur="TextareaEmpty('id_label_textarea','id_textarea','borderId','id_span_label')"
                            onclick="TextareaChangesStyle('id_label_textarea','id_textarea','borderId','id_span_label')"></textarea>
                    </div>
                    <span id="id_span_label" class="span_label_textarea"></span>

                    <span asp-validation-for="CreateProduct.Description" class="text-danger"></span>
                </div>


                <div class="form_input_custom mt-3">
                    <input asp-for="CreateProduct.MainImageUrl" required autocomplete="off" oninput="newimgproduct(this,true)" />

                    <label asp-for="CreateProduct.MainImageUrl" for="name" class="label_name_input">
                        <span class="content_name_input">Url Изображения</span>
                    </label>
                    <span asp-validation-for="CreateProduct.MainImageUrl" class="text-danger"></span>
                </div>


                <div class="ms-3 col-5 text-lg-start">
                    <label asp-for="CreateProduct.SecondaryImages" class="control-label label_secondary_inputs pt-2" ></label>
                </div>
                <div class="col-12 pb-3">

                    <table class="table">
                        <tr class="pb-3">
                            <td>
                                <div id="second_images"></div>
                            </td>
                            <td class="col-1 text-end">
                                <div id="delete_url"></div>
                            </td>
                        </tr>
                    </table>
                    
                    <div class="col-3">
                        <input asp-for="Images" type="button" value="Добавить" class="btn btn-outline-primary form-control" onclick="addImages()" />
                    </div>
                    <span asp-validation-for="CreateProduct.SecondaryImages" class="text-danger"></span>
                </div>

                <div class="form_input_custom mt-3">
                    <input asp-for="CreateProduct.Price" required autocomplete="off" />

                    <label asp-for="CreateProduct.Price" for="name" class="label_name_input">
                        <span class="content_name_input">Цена</span>
                    </label>
                    <span asp-validation-for="CreateProduct.Price" class="text-danger"></span>
                </div>

                <div class="row p-3">

                    <div class="col-6">

                        <div class="container_btn_custom">
                            <a asp-action="ProductIndex" class="btn_custom a_custom">Вернуться</a>
                        </div>

                    </div>
                    <div class="col-6">
                        <div class="container_btn_custom">
                            <button type="submit" class="btn_custom a_custom">Добавить</button>
                        </div>
                    </div>
                
                </div>

            </div>

            <div class="col-3">

                <div id="new_product">

                </div>

            </div>

        </div>
    </div>
</form>

@section Scripts {
    <partial name="_ValidationScriptsPartial"/>
}